<template>
	<modeBoxTemplate>
		<el-form :model="formData" ref="ruleFormRef" label-position="top">
			<el-form-item label="图片路径类型">
				<el-select v-model="formData.pathType" placeholder="选择路径类型">
					<el-option label="使用原本的路径类型" value="original" />
					<el-option label="使用相对路径" value="relative" />
					<el-option label="使用绝对路径" value="absolute" />
				</el-select>
			</el-form-item>
			<el-form-item label="图片移动方式">
				<el-radio-group v-model="formData.imageMovementMethod">
					<el-radio label="move">剪切</el-radio>
					<el-radio label="copy">复制</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<el-button type="primary" :disabled="workOngoing" @click="moveImage">移动</el-button>
	</modeBoxTemplate>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { API } from '@v/utils/API';
import { rootMixin } from '@v/mixin';
import { useRootStore } from '@v/store';
import { ElNotification } from 'element-plus';
import { useMode3Store } from '@v/store/mode/mode3';
import modeBoxTemplate from '../modeBoxTemplate.vue';
import { Mode3Data } from '@type/main-modeData';
import _ from 'lodash';

const { workOngoing } = rootMixin();

const store = useRootStore();
const mode3Store = useMode3Store();

store.setDrawer_isShow(true);

const formData = reactive<Pick<Mode3Data, 'imageMovementMethod' | 'pathType'>>({
	imageMovementMethod: 'move',
	pathType: 'original',
});

const ruleFormRef = ref(null);

// 移动图片
function moveImage() {
	if (mode3Store.imageMoveConfig.length === 0) {
		return ElNotification({
			title: '提示',
			message: '未添加保存路径',
			type: 'warning',
			position: 'top-left',
		});
	}

	let len = 0;

	const imageMoveConfig = mode3Store.imageMoveConfig.map((t) => {
		t.children = t.children.map((s) => {
			return s;
		});

		len += t.children.length;

		return t;
	});

	if (len === 0) {
		return ElNotification({
			title: '提示',
			message: '保存路径没有图片',
			type: 'warning',
			position: 'top-left',
		});
	}

	const data: Mode3Data = {
		imageMoveConfig,
		...formData,
	};

	store.setWork(true, 'mode3');

	API.invoke('mode3', _.cloneDeep(data));
}
</script>
